
<script>
import './index.scss'
export default {
  name: "OrderHeader",
  data () {
    return {
      messageName: 'first',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      abnormal_order:'',
      abnormalType:'',
    }
  },
  methods: {
    getClick () {
      switch (this.messageName) {
        case 'first':
          this.$router.push('/message/abnormal')
          break;
        case "warning":
          this.$router.push('/message/warning')
          break;
        case "inform":
          this.$router.push('/message/inform')
          break;
      }
    },

  },
  mounted () {
    if (this.$route.path === "/message/abnormal") {
      this.messageName = "first";
    } else if (this.$route.path === "/message/warning") {
      this.messageName = "warning";
    } else {
      this.messageName = "inform";
    }
  },
}
</script>
<template>
  <div>
    <el-tabs v-model="messageName" type="border-card" @tab-click="getClick">
      <!-- <el-tab-pane label="通知" name="inform">
        <el-row type="flex">
          <el-col class="finSize">发布时间</el-col>
          <div>
            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <el-col class="finBtn">
            <el-button icon="el-icon-search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="预警" name="warning">
        <el-row type="flex">
          <el-col class="finSize">发布时间</el-col>
          <div>
            <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <el-col class="finBtn">
            <el-button icon="el-icon-search" type="primary">搜索</el-button>
          </el-col>
        </el-row>
      </el-tab-pane> -->
      <el-tab-pane label="异常" name="first">
        <!-- <el-row type="flex">
          <el-col class="finSize">运单号</el-col>
          <div style="width:300px">
           <el-input v-model="abnormal_order" />
          </div>
          <el-col class="finSize" style="margin-left:100px;">异常来源</el-col>
          <div style="width:300px">
           <el-select v-model="abnormalType"></el-select>
          </div>
          <el-col class="finBtn">
            <el-button icon="el-icon-search" type="primary">搜索</el-button>
          </el-col>
        </el-row> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
